<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row>
      <el-col :span="5">
        <div>
          <el-input v-model="searchParam" clearable placeholder="请输入权限名称"></el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-button icon="el-icon-search" type="primary" @click="search()"></el-button>
        </div>
      </el-col>
      <el-col :span="13">
        <el-button
          class="refresh"
          @click="refreshTable"
          type="success"
          icon="el-icon-refresh"
          circle
        ></el-button>
      </el-col>
    </el-row>

    <el-table stripe :data="roleForm" border style="width: 100%">
      <el-table-column align="center" sortable prop="psId" label="权限ID" width="290px"></el-table-column>
      <el-table-column align="center" sortable prop="psName" label="权限名称" width="260px"></el-table-column>

      <el-table-column prop="type" sortable align="center" label="权限等级" width="260">
        <template slot-scope="scope">
          <el-tag effect="dark" type="success">{{ scope.row.type+'级' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="gmtCreate" label="创建时间" width="300px"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      roleForm: [],
      searchParam: ""
    };
  },
  methods: {
    getPsList() {
      this.$http
        .get("/manager/permission/noAuthorize/getPermissionList")
        .then(resp => {
          let { code, msg } = resp.data;
          let { permissionList } = resp.data.data;
          if (code === 1) {
            this.roleForm = permissionList;
          }
        })
        .catch(resp => {});
    },
    search() {
      this.$http
        .get("/manager/permission/noAuthorize/searchByName", {
          params: {
            key: this.searchParam
          }
        })
        .then(resp => {
          let { code, msg } = resp.data;
          let { permissionList } = resp.data.data;
          if (code === 1) {
            return (this.roleForm = permissionList);
          }
          return this.$message(msg);
        })
        .catch(resp => {});
    },
    refreshTable() {
      this.reload();
    }
  },
  created() {
    this.getPsList();
  }
};
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}
.el-breadcrumb {
  margin-top: 10px;
}
.el-row {
  margin-top: 20px;
}
.el-input {
  width: 200px;
}
.refresh {
  float: right;
  margin-right: 10px;
}
</style>